<template>
  <div class="wrapper">
    <!-- 表示找到了多少首 -->
    <div>
      <h2>{{ $store.state.search_data_count }}</h2>
    </div>
    <!-- 搜索页的tab  单曲  歌手 专辑 视频  歌单 歌词  主播电台  用户 -->
    <div class="search_tab">
      <div
        :class="$store.state.select_search_tab === index ? 'active' : ''"
        v-for="(item, index) in search_tab"
        :key="index"
        @click="select_search_tab_fn(item, index)"
      >
        {{ item.title }}
      </div>
    </div>

    <!-- 音乐列表的头行 -->
    <div class="single" v-if="$store.state.select_search_tab === 0">
      <div class="songlist_title">
        <div class="name">音乐标题</div>
        <div class="song_name">歌手</div>
        <div class="songs">专辑</div>
        <div class="play_time">时长</div>
      </div>
      <div class="music">
        <!-- load -->
        <div v-if="loading">
          <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 1)"
            style="width: 100%; height: 300px"
          >
          </el-table>
        </div>
        <!-- 歌曲的每一项 -->
        <div v-if="!loading">
          <div
            class="songlist"
            :class="item.id === $store.state.src_id ? 'active' : ''"
            v-for="(item, index) in $store.state.search_data.songs"
            :key="index"
            @click="play_search_music(item)"
          >
            <!-- @click="play_music(item)" -->

            <!-- 序号 -->
            <div class="index_name">
              <!-- 下标 -->
              <div class="index">
                {{
                  index +
                  1 +
                  ($store.state.search_page - 1) * $store.state.search_limit
                }}
              </div>

              <!-- 音乐标题 -->
              <div class="name">
                <span v-html="item.name1">{{ item.name }}</span>
                <span class="name_wenzi" v-if="item.alias[0]">
                  ( {{ item.alias[0] }} )
                </span>
              </div>
            </div>
            <!-- 歌手名字 -->
            <div class="song_name" v-html="item.artists[0].name1"></div>

            <!-- 专辑 -->
            <div class="songs" v-html="item.album.name1"></div>

            <!-- 时长 -->
            <div class="play_time">{{ item.duration }}</div>
          </div>
          <div class="fyq">
            <el-pagination
              :page-size="30"
              :pager-count="11"
              :current-page="$store.state.search_page"
              layout="prev, pager, next"
              :total="$store.state.search_data.songCount"
              @current-change="search_enter_fn($event)"
            >
            </el-pagination>
          </div>
        </div>

        <!-- <div v-if="$store.state.search_data.songCount === 0">没有找到内容</div> -->
      </div>
    </div>

    <!-- 搜索的歌手 -->
    <div v-if="$store.state.select_search_tab === 1">
      <div v-if="loading">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          style="width: 100%; height: 500px"
        >
        </el-table>
      </div>
      <!-- 控制歌手tab是否加载完成 -->
      <div v-if="!loading">
        <!-- 歌手的每一项 -->
        <div
          class="singer_box"
          v-for="(item, index) in $store.state.search_data.artists"
          :key="index"
          @click="gosingerDetails(item)"
        >
          <!-- 左边盒子 图片 名字 -->
          <div class="left_box">
            <div class="img">
              <img :src="item.img1v1Url" alt="" />
            </div>
            <div class="name">
              <span class="singer_name" v-html="item.name1"></span>
              <span
                class="singer_alias"
                v-if="!(item.alias.length === 0)"
                v-html="` ( ${item.alias[0]} ) `"
              ></span>
            </div>
          </div>
          <div class="singer_info_icon">
            <img src="" alt="" />
          </div>
        </div>

        <!-- 分页器 -->
        <div class="fyq">
          <el-pagination
            :page-size="30"
            :pager-count="11"
            :current-page="$store.state.search_page"
            layout="prev, pager, next"
            :total="$store.state.search_data.artistCount"
            @current-change="search_enter_fn($event)"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 搜索的专辑 -->
    <div v-if="$store.state.select_search_tab === 2">
      <!-- loading -->
      <div v-if="loading">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          style="width: 100%; height: 500px"
        >
        </el-table>
      </div>

      <!-- 专辑内容区 -->
      <div v-if="!loading">
        <!-- 专辑盒子 -->
        <div class="zj_box">
          <!-- 专辑的每一项 -->
          <div
            class="zj_item"
            v-for="(item, index) in $store.state.search_data.albums"
            :key="index"
            @click="go_zj_details(item)"
          >
            <!-- 图片 专辑名称和电视剧名称 -->
            <div class="img_name">
              <div class="img">
                <img :src="item.picUrl" alt="" />
              </div>
              <div class="zj_name">
                <span class="zj" v-html="item.name1"></span>
                <!-- -->
                <span
                  class="name"
                  v-if="item.alias.length > 0"
                  v-html="` ( ${item.alias[0]} ) `"
                ></span>
              </div>
            </div>
            <!-- 专辑作者艺名和名字 -->
            <div class="alias_name">
              <span class="name" v-html="item.artist.name1"></span>
              <span
                class="alias"
                v-if="item.artist.alia.length > 0"
                v-html="` ( ${item.artist.alia[0]} ) `"
              ></span>
            </div>
          </div>
        </div>

        <!-- 分页器 -->
        <div class="fyq">
          <el-pagination
            :page-size="30"
            :pager-count="11"
            :current-page="$store.state.search_page"
            layout="prev, pager, next"
            :total="$store.state.search_data.albumCount"
            @current-change="search_enter_fn($event)"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 搜索的视频 -->
    <div v-if="$store.state.select_search_tab === 3">
      <!-- loading -->
      <div v-if="loading">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          style="width: 100%; height: 500px"
        >
        </el-table>
      </div>

      <div v-if="!loading">
        <!-- 视屏的全部内容盒子 -->
        <div class="vide_box">
          <!-- 视频的内容盒子 -->
          <div class="vied_sm_box">
            <!-- 每一个视屏 -->
            <div
              class="vide_item"
              v-for="(item, index) in $store.state.search_data.videos"
              :key="index"
            >
              <Mv :f1="item">
                <template v-slot:dy_name>
                  <div class="dy_name" v-html="item.creator[0].userName"></div>
                </template>
              </Mv>
            </div>
          </div>

          <!-- 分页器 -->
          <div class="fyq">
            <el-pagination
              :page-size="30"
              :pager-count="11"
              :current-page="$store.state.search_page"
              layout="prev, pager, next"
              :total="$store.state.search_data.videoCount"
              @current-change="search_enter_fn($event)"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索的歌单 -->
    <div v-if="$store.state.select_search_tab === 4">
      <!-- loading -->
      <div v-if="loading">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          style="width: 100%; height: 500px"
        >
        </el-table>
      </div>

      <div v-if="!loading">
        <!-- 全部歌单的盒子 -->
        <div class="playlists_box">
          <!-- 每一个歌单 -->
          <div
            class="playlist"
            v-for="(item, index) in $store.state.search_data.playlists"
            :key="index"
            @click="select_song(item.id)"
          >
            <!-- 歌单的图片 -->
            <div class="img">
              <img :src="item.coverImgUrl" alt="" />
            </div>
            <!-- 歌单的名字 -->
            <div class="playlist_name" v-html="item.name1"></div>
            <!-- 歌单有多少首歌 -->
            <div class="songs_count">{{ `${item.trackCount}首` }}</div>
            <!-- 创建者  作者 -->
            <div class="creator">
              <span>by </span>
              <span class="creator_name" v-html="item.creator.nickname1"></span>
            </div>
          </div>
        </div>
        <!-- 分页器 -->
        <div class="fyq">
          <el-pagination
            :page-size="30"
            :pager-count="11"
            :current-page="$store.state.search_page"
            layout="prev, pager, next"
            :total="$store.state.search_data.playlistCount"
            @current-change="search_enter_fn($event)"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 搜索的主播电台 -->
    <div v-if="$store.state.select_search_tab === 5">
      <!-- loading -->
      <div v-if="loading">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 1)"
          style="width: 100%; height: 500px"
        >
        </el-table>
      </div>

      <!-- 主播电台的内容盒子和分页器 -->
      <div v-if="!loading">
        <!-- 主播电台的内容盒子 -->
        <div class="djRadios_box">
          <!-- 每条电台 -->
          <div
            class="djRadio"
            v-for="(item, index) in $store.state.search_data.djRadios"
            :key="index"
            @click="select_acchor(item)"
          >
            <div class="img">
              <img :src="item.picUrl" alt="" />
            </div>
            <div class="djRadio_name" v-html="item.name1"></div>
            <div class="dj">
              <span class="by"> by </span>
              <span class="nickname" v-html="item.dj.nickname1"></span>
            </div>
          </div>
        </div>
        <!-- 分页器 -->
        <div class="fyq">
          <el-pagination
            :page-size="30"
            :pager-count="11"
            :current-page="$store.state.search_page"
            layout="prev, pager, next"
            :total="$store.state.search_data.djRadiosCount"
            @current-change="search_enter_fn($event)"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Mv from "../components/Mv.vue";
import { hsm, ymd } from "../assets/js/init_time.js";
export default {
  name: "Search_music",
  data() {
    return {
      //   搜索页面的tab选项
      search_tab: [
        { title: "单曲", type: 1 },
        { title: "歌手", type: 100 },
        { title: "专辑", type: 10 },
        { title: "视频", type: 1014 },
        { title: "歌单", type: 1000 },
        { title: "主播电台", type: 1009 },
      ],
      //     搜索页面的loading
      loading: true,
      //   选择tab选项
      select_search_tab: 0,

      type: 1,
    };
  },
  components: {
    Mv,
  },
  mounted() {
    this.loading = false;
  },
  methods: {
    //   点击搜索页面的tab
    select_search_tab_fn(item, index) {
      this.$store.commit("select_search_tab", index);
      this.$store.commit("select_searrch_tab_type", item.type);
      console.log(item);
      this.search_enter_fn("", item.type);
    },
    //   根据搜索页面的tab根据标题搜索
    search_enter_fn(e, type) {
      this.loading = true;
      // e是page页数
      e = e || 1;
      this.$store.commit("search_page", e);
      // 传进来的类型 是搜索歌手 歌曲  专辑的type
      console.log("e  =>>  我是第几页", e);
      type = type || this.$store.state.select_searrch_tab_type;
      this.axios({
        methods: "get",
        url: "/search",
        params: {
          keywords: this.$store.state.search_value,
          type: type,
          limit: 30,
          offset: (e - 1) * 30,
        },
      })
        .then((res) => {
          // 判断是否在单曲标签页
          console.log(type);
          console.log("我是当页面",res);
          if(!(res.data.result)){
            alert("这里的数据不够啦\n快去选其他的音乐吗")
             this.loading = false;
          }
          if (res.data.result.songs) {
            console.log("我是歌曲的res", res);
            res.data.result.songs.forEach((v) => {
              v.duration = hsm(v.duration);
              v.name1 = this.bright_search_value(v.name);
              v.album.name1 = this.bright_search_value(v.album.name);
              v.artists[0].name1 = this.bright_search_value(v.artists[0].name);
            });
            let count = `找到${res.data.result.songCount}首单曲`;
            this.$store.commit("search_data_count", count);
            this.$nextTick(this.$store.commit("search_data", res.data.result));
            this.loading = false;
            return;
          }
          // 判断是否在歌手标签页
          if (res.data.result.artists) {
            console.log(res);
            res.data.result.artists.forEach((v) => {
              v.name1 = this.bright_search_value(v.name);
              if (v.alias.length > 0) {
                v.alias[0] = this.bright_search_value(v.alias[0]);
              }
            });
            console.log(res);
            let count = `找到${res.data.result.artistCount}位歌手`;
            this.$store.commit("search_data_count", count);
            this.$nextTick(this.$store.commit("search_data", res.data.result));
            console.log("我是歌手的res", count);

            this.loading = false;
            return;
          }
          // 判断是否在专辑页面
          if (res.data.result.albums) {
            console.log("我进到了专辑tab页面");
            console.log("我是专辑的res", res);
            // 找到也多少专辑
            let count = `找到${res.data.result.albumCount}张专辑`;
            this.$store.commit("search_data_count", count);
            // 遍历得到的专辑数据  并且切割成有关键字就高亮的文字
            res.data.result.albums.forEach((v) => {
              // 专辑名称
              v.name1 = this.bright_search_value(v.name);
              // 判断专辑是不是有替代名  例如电视剧名称
              if (v.alias.length > 0) {
                v.alias[0] = this.bright_search_value(v.alias[0]);
              }
              // 歌手的名称
              v.artist.name1 = this.bright_search_value(v.artist.name);
              // 判断歌手是否有花名
              if (v.artist.alia.length > 0) {
                v.artist.alia[0] = this.bright_search_value(v.artist.alia[0]);
              }
            });
            // 将搜索并且整理好的数据 发送vuex的搜索后的数据
            this.$nextTick(this.$store.commit("search_data", res.data.result));
            console.log(res.data.result);
            this.loading = false;
            return;
          }
          // 判断是否是视频的数据
          if (res.data.result.videos) {
            console.log(res);
            // 找到多少个视屏
            let count = `找到${res.data.result.videoCount}个视频`;
            // 将个数发送给vuex
            this.$store.commit("search_data_count", count);

            // 遍历每个视频替换关键词
            res.data.result.videos.forEach((v) => {
              // 将图片名称数据 处理成组件需要的数据
              v.imgurl16v9 = v.coverUrl;
              // 将title 处理成组件需要的格式  并且 替换关键词高亮
              v.name = this.bright_search_value(v.title);
              // 视频的by
              v.creator[0].userName = this.bright_search_value(
                v.creator[0].userName
              );
              // 视频的播放数量
              let playCount = "";
              if (String(v.playTime).length > 4) {
                playCount =
                  String(v.playTime).slice(0, String(v.playTime).length - 4) +
                  "万";
              } else {
                playCount = String(v.playTime);
              }
              v.playCount = playCount;
              //
              v.duration = hsm(v.durationms);
            });
            this.$nextTick(this.$store.commit("search_data", res.data.result));
            console.log("我是处理好的", res);

            this.loading = false;
            return;
          }
          // 判断是否在歌单
          if (res.data.result.playlists) {
            // 找到多少歌单
            let count = `找到${res.data.result.playlistCount}个歌单`;
            // 将个数发送给vuex
            this.$store.commit("search_data_count", count);
            // 遍历每条歌单  替换关键词高亮
            res.data.result.playlists.forEach((v) => {
              v.name1 = this.bright_search_value(v.name);
              v.creator.nickname1 = this.bright_search_value(
                v.creator.nickname
              );
            });
            this.$nextTick(this.$store.commit("search_data", res.data.result));
            this.loading = false;
            return;
          }
          // 判断是否在主播电台页面
          if (res.data.result.djRadios) {
            console.log(res);
            // 找到多少个电台
            let count = `找到${res.data.result.djRadiosCount}个电台`;
            // 将个数发送给vuex
            this.$store.commit("search_data_count", count);
            // 遍历每条电台 关键词加上高亮
            res.data.result.djRadios.forEach((v) => {
              v.name1 = this.bright_search_value(v.name);
              v.dj.nickname1 = this.bright_search_value(v.dj.nickname);
            });
            // 将整理好的数据发给vuex
            this.$nextTick(this.$store.commit("search_data", res.data.result));
            // 关闭loading
            this.loading = false;
            return;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 判断是否存在我们要进行搜索的关键字  并 关键字替换掉
    bright_search_value(val) {
      let keyword = this.$store.state.search_value;
      // console.log(keyword);
      if (val.indexOf(keyword) !== -1) {
        return val.replace(keyword, `<font color='#33ccff'> ${keyword}</font>`);
      } else {
        return val;
      }
    },
    // 点击播放  并且调用歌曲详情的接口
    play_search_music(item) {
      this.axios({
        method: "get",
        url: "/song/detail",
        params: {
          ids: item.id,
        },
      })
        .then((res) => {
          console.log("音乐详情", res);
          let play_info = {
            picUrl: "",
            name: "",
            playTime: "",
            song: {
              alias: [],
              artists: [{ name: "" }],
            },
            id: "",
            type: "singer_music",
          };
          //   图片路劲
          play_info.picUrl = res.data.songs[0].al.picUrl;
          //   音乐名称层
          play_info.name = res.data.songs[0].name;
          //   播放时间
          play_info.playTime = res.data.songs[0].dt;
          // //   播放时间  毫秒形式
          // play_info.playTimeS = res.data.songs[0].dt;
          //
          play_info.song.alias = "";
          //   歌手名称
          play_info.song.artists[0].name = res.data.songs[0].ar[0].name;
          //   音乐的id
          play_info.id = res.data.songs[0].id;

          // this.$store.dispatch("check_music");
          this.$store.commit("musis_info", play_info);
          this.$store.commit("play_list", play_info);
          this.$store.commit("src_id", play_info.id);
          this.$store.dispatch("get_src");

          console.log("item", item);
          console.log(this.$store.state.musis_info);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跳转到歌手页面
    gosingerDetails(item) {
      this.search_box = false;
      console.log(item);
      console.log("我要去歌手详情页");
      this.$store.commit("singer_info", item);
      this.$router.push({ name: "SingerDetails" });
    },
    // 点击跳转专辑详情你  Zjdetails
    // 点击专辑到专辑详情
    go_zj_details(item) {
      this.axios({
        method: "get",
        url: "/album/detail/dynamic",
        params: {
          id: item.id,
        },
      })
        .then((res) => {
          console.log(item);
          console.log(res);
          console.log(res);
          item.commentCount = res.data.commentCount;
          item.subCount = res.data.subCount;
          item.shareCount = res.data.shareCount;
          item.publishTime = ymd(item.publishTime);
          item.picUrl = item.picUrl;
          let arr = [];
          arr.push(item.artist);
          item.artists = arr;
          this.$store.commit("select_acchor_data", item);

          // let artists = [];
          // item.artists.forEach((v) => {
          //   artists.push(v, { name: "/" });
          // });
          // // 删除最后一个斜杆
          // artists.pop();

          // // 将修改好格式的数据传回去
          // item.artists = artists;

          console.log("s数据", item);

          this.get_singer_album_center_fn(item.id, item);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取专辑内容
    get_singer_album_center_fn(id, v) {
      this.axios({
        method: "get",
        url: "/album",
        params: {
          id: id,
        },
      })
        .then((res) => {
          console.log("我要加载多久");
          console.log(res);
          // 长度
          v.len = res.data.songs.length;
          v.all_album_music = res.data.songs;
          v.sg = "sg";

          // 遍历格式化时间
          res.data.songs.forEach((v1) => {
            v1.dt = hsm(v1.dt);
          });
          console.log(res.data.songs);
          this.$nextTick(this.$store.commit("select_acchor_data", v));
          this.$router.push({ name: "Zjdetails" });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击跳转至歌单的详情页
    // 选择歌单跳转至歌单详情
    select_song(id) {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id,
        },
      })
        .then((res) => {
          // 将图片换成Select组件想要的键名
          res.data.playlist.picUrl = res.data.playlist.coverImgUrl;
          // 将收藏数量换成Select组件想要的名字
          res.data.playlist.subCount = res.data.playlist.subscribedCount;
          // 将标签成我们需要的格式
          let tags = [];
          res.data.playlist.tags.forEach((v) => {
            tags.push(v, "/");
          });
          // 删除最后一个斜杆
          tags.pop();

          // 将修改好格式的数据传回去
          res.data.playlist.tags = tags;
          // 将简介转换成Select组件需要的名字
          console.log(res.data.playlist.description);
          if (res.data.playlist.description != null) {
            res.data.playlist.desc = res.data.playlist.description.split("\n");
          }
          let subCount = String(res.data.playlist.subCount);
          if (subCount.length > 4) {
            res.data.playlist.subCount =
              subCount.slice(0, subCount.length - 4) + "万";
          }
          let shareCount = String(res.data.playlist.shareCount);
          if (shareCount.length > 4) {
            res.data.playlist.shareCount =
              shareCount.slice(0, shareCount.length - 4) + "万";
          }

          res.data.playlist.gd = "gd";

          if (res.data.playlist.desc) {
            res.data.playlist.desc.unshift("简介");
          }
          this.$store.commit("select_acchor_data", res.data.playlist);
          console.log(res.data.playlist);
          this.$router.push({ name: "Songdetails" });
          return;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    select_acchor(item) {
      this.axios({
        method: "get",
        url: "/dj/detail",
        params: {
          rid: item.id,
        },
      })
        .then((res) => {
          res.data.data.desc = res.data.data.desc.split("\n");
          this.$router.push({ name: "SelectAcchor" });
          this.$store.commit("select_acchor_data", res.data.data);
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  overflow-y: auto;
  height: 670px;
}
// tab 样式
.search_tab {
  display: flex;
  div {
    font-size: 18px;
    margin-right: 25px;
    color: #555;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
    &:hover {
      color: black;
    }
  }
  .active {
    color: black;
    font-weight: bold;
    border-bottom: 3px solid #e4393c;
  }
}

// 音乐列表的头
.single {
  margin-top: 10px;
  .songlist_title {
    display: flex;
    text-align: inherit;
    color: #555;
    padding: 10px 0;
    div {
      cursor: default;
    }
    //   background: brown;
    .name {
      flex: 0 50%;
      // background: cornflowerblue;
      //   color: #333;
      padding-left: 100px;
      box-sizing: border-box;
    }
    .song_name {
      flex: 0 15%;
      //   color: #666;
      // background: cornsilk;
    }
    .songs {
      flex: 0 25%;
    }
    .play_time {
      flex: 0 10%;
      // background: crimson;
    }
  }
  // 音乐
  .music {
    .songlist {
      padding: 10px 0;
      cursor: default;
      display: flex;
      color: #555;

      .index_name {
        display: flex;
        flex: 0 50%;
        //   background: cornflowerblue;
        box-sizing: border-box;
        .index {
          flex: 0 20%;
          // background: cadetblue;
          text-align: center;
        }
        .name {
          width: 400px;
          overflow: hidden;
          text-overflow: ellipsis;
          // color: #333;
          white-space: nowrap;
          .name_wenzi {
            color: #999;
          }
        }
      }
      .song_name {
        // flex: 0 15%;
        width: 145px;
        //   background: cornsilk;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover {
          color: #333;
          cursor: pointer;
        }
      }
      .songs {
        // flex: 0 25%;
        width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:hover {
          cursor: pointer;
          color: #333;
        }
      }
      .play_time {
        flex: 0 10%;
        box-sizing: border-box;
        padding-left: 10px;
      }
      &:nth-child(2n-1) {
        background: #f0f0f0;
      }
      &:hover {
        background: #9999;
      }
    }
    .active {
      color: #e4393c !important;
    }
  }
}

.fyq {
  display: flex;
  justify-content: center;
}

// 修改分页器的样色
/deep/ .el-pager li.active {
  color: #e4393c;
}

/deep/ .el-pager li:hover {
  color: #e4393c;
}

/deep/ .el-pagination button:hover {
  color: #e4393c;
}

// 歌手的样式
.singer_box {
  // background: #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  padding: 10px 0;
  cursor: pointer;
  &:nth-child(2n-1) {
    background: rgb(249, 249, 249);
  }
  &:hover {
    background: rgb(240, 241, 242);
  }
  .left_box {
    display: flex;
    align-items: center;
    .img {
      width: 80px;
      // height: 75px;
      // background: aqua;
      img {
        width: 100%;
        border-radius: 5px;
      }
    }
    .name {
      margin-left: 10px;
      .singer_alias {
        color: #777;
      }
    }
  }
  .singer_info_icon {
  }
}

// tab专辑的样式
.zj_box {
  .zj_item {
    display: flex;
    align-items: center;
    // background: chartreuse;
    padding: 8px 0;
    cursor: pointer;
    &:nth-child(2n-1) {
      background: rgb(249, 249, 249);
    }
    &:hover {
      background: rgb(240, 241, 242);
    }
    .img_name {
      flex: 0 60%;
      // background: cyan;
      display: flex;
      align-items: center;
      .img {
        width: 70px;
        height: 70px;
        border-radius: 5px;
        overflow: hidden;
        // background: darkgoldenrod;
        img {
          width: 100%;
        }
      }
      .zj_name {
        width: 450px;
        padding-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .zj {
        }
        .name {
          color: #777;
        }
      }
    }
    .alias_name {
      // flex: 0 40%;

      width: 415px;
      // background: darkcyan;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .name {
        color: #444;
        &:hover {
          color: black;
        }
      }
      .alias {
        color: #777;
      }
    }
  }
}

// tab页的视频
.vide_box {
  // display: flex;
  // justify-content: space-between;
  // height: 300px;
  .vied_sm_box {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    padding-right: 15px;
    .vide_item {
      flex: 0 32%;
      margin-top: 10px;

      // background: blue;
    }
  }
}

// tab页是歌单视频
.playlists_box {
  .playlist {
    padding: 10px 0;
    display: flex;
    align-items: center;
    padding-right: 10px;
    // background: darkkhaki;
    cursor: pointer;

    &:nth-child(2n-1) {
      background: rgb(249, 249, 249);
    }
    &:hover {
      background: rgb(240, 241, 242);
    }
    .img {
      width: 70px;
      height: 70px;
      background: burlywood;
      margin-right: 10px;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .playlist_name {
      // flex: 0 45%;
      width: 450px;
      font-size: 18px;
      // background: chocolate;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #444;
    }
    .songs_count {
      // background: cornflowerblue;
      padding-left: 10px;
      width: 150px;
      color: #777;
      font-size: 14px;
    }
    .creator {
      width: 250px;
      // background: cyan;
      color: #ccc;
      font-size: 14px;
      .creator_name {
        color: #333;
      }
    }
  }
}

// tab页面的主播电台
.djRadios_box {
  .djRadio {
    padding: 10px 0;
    // background: salmon;
    display: flex;
    align-items: center;
    padding-right: 20px;
    cursor: pointer;

    &:nth-child(2n-1) {
      background: rgb(249, 249, 249);
    }
    &:hover {
      background: rgb(240, 241, 242);
    }
    .img {
      width: 70px;
      height: 70px;
      background: seagreen;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .djRadio_name {
      width: 600px;
      padding-left: 20px;
      color: #555;
      // backgrounrgb(11, 14, 9)use;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dj {
      width: 270px;
      // background: coral;
      .by {
        color: #ccc;
        font-size: 14px;
      }

      .nickname {
        color: #777;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>